<template>
  <div>
    <q-table
      v-if="Object.keys(deviceMap).length !== 0"
      class="no-border-radius full-height bg-transparent"
      title="执行中单机方案"
      :card-container-style="{ overflow: 'auto' }"
      card-container-class="q-pa-sm content-start"
      grid
      :rows="Object.keys(deviceMap)"
      :pagination="{ rowsPerPage: 16 }"
      hide-header
    >
      <template v-slot:top-right>
        <q-btn
          color="secondary"
          icon="cached"
          @click="reset"
          label="重置任务"
        />
      </template>
      <template v-slot:item="props">
        <div class="q-pa-sm col-xs-6 col-sm-4 col-md-3">
          <q-card @click="planTable.show(deviceMap[props.row].planID)">
            <q-toolbar>
              <q-toolbar-title>{{ props.row }}</q-toolbar-title>
              <q-btn
                flat
                round
                dense
                icon="close"
                @click.stop="stopPlan(deviceMap[props.row], props.row)"
              />
            </q-toolbar>
            <q-list dense bordered padding class="rounded-borders">
              <q-item>
                <q-item-section>剩余轮数</q-item-section>
                <q-item-section side>
                  <div class="row q-gutter-x-sm">
                    <div style="line-height: 2.5rem">
                      {{ deviceMap[props.row].count }}
                    </div>
                    <q-btn
                      flat
                      round
                      icon="cached"
                      @click.stop="restart(deviceMap[props.row], props.row)"
                    />
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </template>
    </q-table>
    <div v-else>
      <div
        class="flex justify-center content-center"
        style="height: calc(100vh - 9.2rem)"
      >
        <div
          class="text-h4 text-grey-7 text-center q-mt-lg"
          style="width: 30rem"
        >
          当前没有执行中的任务
        </div>
      </div>
    </div>
    <plan-tables ref="planTable" />
  </div>
</template>

<script>
import { useAPIStore } from "stores/api";
import { api } from "boot/axios";
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import PlanTables from "components/actionPlan/PlanTables.vue";

export default {
  name: "SingleDevicePlan",
  components: { PlanTables },
  setup() {
    const $q = useQuasar();
    const deviceMap = ref({});

    function getDeviceMap() {
      api.get(useAPIStore().centerUrl + "action/single/map").then((rs) => {
        deviceMap.value = rs.data;
      });
    }

    onMounted(getDeviceMap);

    return {
      deviceMap,
      reset() {
        api.get(useAPIStore().centerUrl + "action/single/reset").then((rs) => {
          console.log(rs.data);
          getDeviceMap();
        });
      },
      stopPlan(obj, deviceID) {
        $q.dialog({
          title: "停止方案",
          message:
            "是否要停止设备" +
            deviceID +
            obj.name +
            "的方案" +
            obj.planID +
            "？",
          cancel: true,
          persistent: true,
        }).onOk(() => {
          api
            .get(useAPIStore().centerUrl + "action/clear/plan", {
              params: { planID: null, deviceID },
            })
            .then((res) => {
              $q.notify({ message: res.data, type: "positive" });
              getDeviceMap();
            })
            .catch(() => {
              $q.notify({ message: "方案中止失败", type: "negative" });
            });
        });
      },
      restart(obj, deviceID) {
        $q.dialog({
          title: "重试方案",
          message: "是否要重试设备" + deviceID + "上" + obj.name + "方案？",
          cancel: true,
          persistent: true,
        }).onOk(() => {
          api
            .get(useAPIStore().centerUrl + "action/restart/" + deviceID)
            .then((res) => {
              $q.notify({ message: res.data, type: "positive" });
              getDeviceMap();
            })
            .catch(() => {
              $q.notify({ message: "方案重试失败", type: "negative" });
            });
        });
      },
      planTable: ref(),
    };
  },
};
</script>
